<template>
    <div class="components-container" style='height:100vh' >
        <div class='chart-container'>
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">容量数据采集</span></h5>
                </div>
            </section>

            <section class="searchBar">
              <div class="form-inline">
                <div class="pull-left">
                  <div class="searchSel">
                      <cascaderMulti :data="domains" @on-change="array => modules = array"  placeholder="模块"></cascaderMulti>
                  </div>
                  <div class="searchSel">
                    <el-select size="small" @change="changeGrain" v-model="grain" placeholder="粒度" >
                      <el-option v-for="item in grains" :key="item.grain" :label="item.label" :value="item.grain">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="searchSel">
                    <el-select :disabled="disabled" size="small" v-model="type" placeholder="类型" >
                      <el-option v-for="item in types" :key="item.type" :label="item.label" :value="item.type">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="searchSel">
                    <el-date-picker @change="pickTime" size="small" v-model="time" format="yyyy-MM-dd HH:mm" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
                  </div>
                  <div class="searchbtn">
                      <el-button size="small" @click="search()">搜索</el-button>
                  </div>
                </div>
              </div>
            </section>
            <section class="showchars">
              <div id="char1"></div>       
              <div id="char2"></div> 
            </section>       
        </div>
      </div>
</template>

<script>
import { getDomainIps, getData } from '@/api/capacityData'
import echarts from 'echarts'

export default {
  data() {
    return {
      modules: [],
      grains: [{
        label: '1分钟',
        grain: '1m'
      }, {
        label: '5分钟',
        grain: '5m'
      }, {
        label: '1小时',
        grain: '1h'
      }, {
        label: '1天',
        grain: '1d'
      }],
      grain: null,
      types: [{
        label: '均值',
        type: '均值'
      }, {
        label: '峰值',
        type: '峰值'
      }],
      type: null,
      time: null,
      domains: [],
      startTime: null,
      endTime: null,
      disabled: false
    }
  },
  mounted() {
    this.getDomains()
    this.chartShow()
  },
  destroyed() {
  },
  methods: {
    chartShow() {
      const product = echarts.init(document.getElementById('char1'))
      const product2 = echarts.init(document.getElementById('char2'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['流量', 'CPU'],
          x: 'center'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00'
            ].map(function(str) {
              return str.replace(' ', '\n')
            })
          }
        ],
        yAxis: [
          {
            name: '流量',
            type: 'value'
          },
          {
            name: 'CPU',
            type: 'value'
          }
        ],
        series: [
          {
            name: '流量',
            type: 'line',
            data: [
              0.97, 0.96, 0.96
            ]
          },
          {
            name: 'CPU',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            data: [
              0, 0, 0
            ]
          }
        ]
      }
      product.setOption(option)
      product2.setOption(option)
    },
    getDomains() {
      var listQuery = { }
      getDomainIps(listQuery).then(response => {
        this.domains = response.data.data
      }).catch(_ => {
      })
    },
    pickTime(val) {
      this.startTime = val.split(' - ')[0]
      this.endTime = val.split(' - ')[1]
    },
    changeGrain(val) {
      if (val === '1m') {
        this.type = ''
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
    search() {
      const objs = this.modules.join(',')
      var listQuery = { modules: objs, type: this.type, grain: this.grain, startTime: this.startTime, endTime: this.endTime }
      getData(listQuery).then(response => {
        response.data.data
      }).catch(_ => {
      })
    }
  }
}
</script>
<style  lang="scss" >
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
    }
}
.chart-container{
  width: 100%;
  height: 80%;
  .chartChose{
    margin-bottom: 20px;
    padding: 10px 0 20px;
    border-bottom:1px solid #eee;
  }
}
#char1,#char2{
  width: 100%;
  height: 400px;
}
.showchars{
  padding-top: 30px;
}
.searchBar{
    padding: 0 10px;
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchbtn{
  float:right;
}
</style> 